<template>
  <div class="sign">
    <i class="el-icon-close close" @click="close" />
    <el-tabs v-model="activeTab" @tab-click="signTabClick">
      <el-tab-pane label="登录" name="signin">
        <Signin ref="signin" />
      </el-tab-pane>
      <el-tab-pane label="注册" name="signup">
        <Signup ref="signup" @signupEmit="signupToSignin" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Signin from "./components/Signin";
import Signup from "./components/Signup";
export default {
  name: "Sign",
  components: {
    Signin,
    Signup,
  },
  data() {
    return {
      activeTab: "signin",
    };
  },
  methods: {
    signTabClick(tab) {
      let tabName = tab.name;
      if (tabName === "signin") {
        this.$refs.signup.modifyEmail();
      } else {
        this.$refs.signin.clearForm();
      }
    },
    signupToSignin() {
      this.activeTab = "signin";
    },
    close() {
      this.$store.commit("setSignStatus", false);
    },
  },
};
</script>

<style lang="stylus">
.sign {
  width: 3.8rem;
  height: 3.67rem;
  border-radius: 0.12rem;
  padding: 0.1rem 0.3rem;
  background-color: white;
  position: fixed;
  left: calc(50% - 1.9rem);
  top: calc(50% - 1.835rem);
}

.sign i.close {
  color: #b5b9bc;
  font-size: 0.2rem;
  position: absolute;
  top: 0.2rem;
  right: 0.2rem;
  transition: all 0.3s;
}

.sign i.close:hover {
  cursor: pointer;
  color: var(--colorLevel1, #409EFF);
  transform: scale(1.1);
}

.sign .el-tabs .el-tabs__item {
  font-size: 0.16rem;
}

.sign .el-tabs .el-tabs__nav-wrap:after {
  width: 0;
}

.sign .el-input__inner {
  height: 0.48rem;
  font-size: 0.16rem;
  border-radius: 0.08rem;
}

.sign .el-form-item {
  margin-bottom: 0;
  margin-top: 0.2rem;
}

.sign .el-form-item__error {
  font-size: 0.12rem;
}

.sign .el-button {
  width: 100%;
  padding: 0.13rem 0.4rem;
  font-size: 0.2rem;
  border-radius: 0.3rem;
}

.sign p.resend, .sign p.send-code, p.random-code {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 0.1rem;
}

.sign p.resend .el-button, .sign p.send-code .el-button {
  padding: 0;
  font-size: 0.14rem;
}

.sign span.countdown {
  padding-left: 0.05rem;
}

.sign .el-form-item.auto-signin, .sign .el-form-item.signin-btn, .sign .el-form-item.agreement, .sign .el-form-item.signup-btn {
  margin-top: 0.06rem;
}
</style>